<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>俱乐部页面</title>
	</head>
	    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
        <meta name="viewport" content="user-scalable=0,width=device-width,initial-scale=1.0" >
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
	    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>	    
	<style>
		 *{
			    margin: 0px;
			    padding: 0px;
		}
			div.search {
				padding: 10px 0;
				} 
			form { 
				position: relative;
			    width: 300px;
			    margin: 0 auto; 
			    } 
			input, button { 
				border: none; 
				outline: none; 
				} 
			input { 
				width: 100%;
			    height: 42px; 
			    padding-left: 13px; 
			    } 
			button {
				height: 42px; 
				width: 42px; 
				cursor: pointer; 
				position: absolute; 
				}
		    .bar6 {
		    	background: #F9F0DA;
		    	} 
		    .bar6 input {
		    	 border: 2px solid #c5464a; 
		    	 border-radius: 5px; 
		    	 background: transparent; 
		    	 top: 0; 
		    	 right: 0; 
		    	 } 
		    .bar6 button { 
		    	 background: #c5464a;
		    	 border-radius: 0 5px 5px 0; 
		    	 width: 60px; 
		    	 top: 0; 
		    	 right: 0; 
		    	 }
		    .bar6 button:before { 
		    	 content: "搜索"; 
		    	 font-size: 13px; 
		    	 color: #F9F0DA; 
		    	 }
	
	    	form { 
	    		 position: relative;
	    		 width: 270px; 
	    		 margin: 0 auto; 
	    		 text-align: center;
	    		 } 
	    		 
	        input, button {
	        	 border: none; 
	        	 outline: none;
	        	  } 
	        	  
	        input { 
	        	width: 270px; 
	        	height: 42px;
	        	padding-left: 13px;
	        	/*text-align: center;*/
	        	  } 
	        	  
	        button { 
	        	height:42px;
	        	width: 42px; 
	        	cursor: pointer;
	        	position: absolute; 
	        	} 
	        	  	        	  
	        .bar{
	        	background: #F9F0DA;
	        	} 
	        		        
	        .bar input { 
	        	border:2px solid #c5464a
	        		}
	        .bar button { 
	        	top: 2px; right: ;
	        		} 
	        .bar button:before { 
	        	content: "\f002"; 
	        	font-family: FontAwesome;
	        	font-size: 16px; 
	        	color: #F9F0DA; 
	        	} 
	         .bar input:focus { 
	        	border-color: #311c24;
	        	}
	        	
	        	 .nav-footer {
				    width: 100%;
				    position: fixed;
				    bottom: 0;
				    left: 0;
				    display: flex;
				    align-items: center;
				    justify-content: space-around;
				    background: #fff;
				    border-top: solid 1px #e6e6e6;
				    padding: 1%;
				    height: 50px;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 10px;
				    color: #929292;
				}
				.nav-footer a span img {
				    height: 25px;
				    overflow: hidden;
				    font-size: 23px;
				    padding-top: 2px;
				}
				.mui-icon {
				    font-family: Muiicons;
				    font-size: 24px;
				    font-weight: 400;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 11px;
				    color: #929292;
				}
				*{
	        	margin: 0px;
	        	padding: 0px;
	        }
	        
	        body{
	        	font-size: 12px;
                color: #FFF;
                font-family: Arial, Helvetica, sans-serif;
	        }
	        
	        div{
	        	display: block;
	        }
	        
	        a{
	             text-decoration: none;	
	        }
	        
	        li{
	        	list-style: none;
	        	display: list-item;
                text-align: -webkit-match-parent;
	        }
	        
	        /*头部*/
        	.mt_header{
        		background-color: black;
        	}
        	
        	.searchcontent{
        		float: right;
        		height: 39px;
        		width: 215px;
        	}
        	
        	.search_box{
        		height: 30px;
                width: 65%;
        	}
        	
        	button.search{
        		width: 34px;
        		height: 31px;
        	}
    
            ul.nav.nav-tabs{
            	width: 100%;
            	height: 38px;
            	float: flex;
            }
            div.col-sm-6.col-md-3{
                border: 1px solid #E0DEDB;  
                width: 268px;
            	height: 235px;  
            	margin-top: 10px;       	
            }
            
            div.col-sm-6.col-md-3> img{
            	margin-top: 10px;
            	width: 237px;
            	height: 206px;
            	border: dashed;
            }
            
            p{
            	text-align: center;
            	font-family: "微软雅黑";
            	font-size: 12px;
            	font-weight: bold;
            }
            
	</style>
	
	<body>

	<header class="mt_header">
			<div class="mt_header_box">
				<img src="img/logo.gif"/>
				<!--搜索按钮-->
				<form action="#" class="searchcontent">					
					<input type="search" placeholder="内容搜索" class="search_box"/>
					<button class="search">搜索</button>
				</form>				
			</div>
	</header>
	
	
	<article>
		 <div class="container">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#menu1">最具人气</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">离我最近</a>
    </li>
    
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    

   
    <div id="menu1" class="container tab-pane fade"><br>
      <div class="row1">
      	
    
</div>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
    <div class="row2">    	
    
</div>
    </div>
     </div>
	</article>
	<div class="nav-footer">
			<a class="" href="index.html">
				<span><img src="img/home.png"/></span>
				<span class="mui-tab-label">联盟</span>
			</a>
			<a href="trail.html">
				<span><img src="img/sport.png"/></span>
				<span class="mui-tab-label">训练</span>
			</a>
			<a href="showpicture.html">
				<span><img src="img/picture.png"/></span>
				<span class="mui-tab-label">晒图</span>
			</a>
			<a class="icon-active" href="club.html">
				<span><img src="img/clubs.png"/></span>
				<span class="mui-tab-label">俱乐部</span>
			</a>
			<a href="mine.html">
				<span><img src="img/mine.png"/></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</div>
		
	
	<script type="text/javascript">
	 $(function() {
            var url = "http://172.24.10.175/workout/api.php/lists/mod/club";
            $.ajax({
                type: 'post',
                url: url,
                cache: false,
                dataType: 'jsonp',               
                success: function (data) {
                    for (var i =0;i<4;i++){  
                    	var id=data[i]['id']; 
                var imgsrc='http://172.24.10.175/workout/Uploads/'+data[i]['thumb'];
				var id=data[i]['id'];
				$('.row1').append("<a href='clubdetail.html?id="+id+"'><div class='col-sm-6 col-md-3'><img src="+imgsrc+">"+"<p>"+data[i]['club_name']+"</div>"+"</a>");
			        	
                    }
                }
            });
        });



	 $(function() {
            var url = "http://172.24.10.175/workout/api.php/nearclub";
            $.ajax({
                type: 'post',
                url: url,
                cache: false,
                dataType: 'jsonp',
                success: function (data) {
                    for (var i =0;i<6;i++){
//                  	var id=data[i]['id'];
//                      $(".near_img"+i).attr("src","http://172.24.10.175/workout/Uploads/"+data[i].thumb);
//                      $(".near_text"+i).text(data[i].club_name);                    
                var imgsrc='http://172.24.10.175/workout/Uploads/'+data[i]['thumb'];
				var id=data[i]['id'];
				$('.row2').append("<a href='clubdetail.html?id="+id+"'><div class='col-sm-6 col-md-3'><img src="+imgsrc+">"
					+"<p>"+data[i]['club_name']+"</div>"+"</a>");
                    }
                }
            });
        });
        
</script>
	</body>
</html>
